<div class="clr-row" *ngIf="loading">
  <div class="clr-col-lg-12 white-div"></div>
  <div class="clr-col-lg-12 loading-div center">
    <span class="spinner spinner-lg loading">
      Loading...
    </span>
  </div>
</div>
<div class="clr-row" *ngIf="!loading">
  <div class="clr-col-lg-12 clr-col-12">
    <div style="float: right">
      <div class="clr-select-wrapper">
        <select class="clr-select" [(ngModel)]="dashboardSearch.dateLimit">
          <option value="1">过去一天</option>
          <option value="7">过去一周</option>
          <option value="30">过去一月</option>
        </select>
      </div>
      &nbsp; &nbsp; &nbsp;
      <div class="clr-select-wrapper">
        <select class="clr-select" [(ngModel)]="dashboardSearch.cluster" (ngModelChange)="search()">
          <option value="all">所有集群</option>
          <option *ngFor="let c of selectClusters" value="{{c.name}}">{{c.name}}</option>
        </select>
      </div>
      &nbsp;
      <button class="btn btn-link" (click)="refresh()">
        <clr-icon shape="refresh"></clr-icon>
      </button>
    </div>
  </div>
</div>
<div class="clr-row" *ngIf="!loading && clusters.length === 0">
  <div class="clr-col-sm-12 center">
    <div class="card card-block card-top">
      <h2>快速开始</h2>
      <div class="clr-row" style="margin-top: 50px;">
        <div class="clr-col-sm-4 center">
          <img src="assets/images/dashboad_server.svg" class="img-responsive middle" width="88" height="88">
          <p class="card-text"><a href="https://docs.kubeoperator.io/kubeoperator-v2.1/userguide-manual"
                                  target="_blank">在物理机上创建集群</a></p>
        </div>
        <div class="clr-col-sm-4 center">
          <img src="assets/images/dashboard_vmware.svg" class="img-responsive middle" width="88" height="88">
          <p class="card-text"><a href="https://docs.kubeoperator.io/kubeoperator-v2.1/userguide-vsphere"
                                  target="_blank">在vSphere上创建集群</a></p>
        </div>
        <div class="clr-col-sm-4 center">
          <img src="assets/images/dashboard_openstack.svg" class="img-responsive middle" width="88" height="88">
          <p class="card-text">
            <a href="https://docs.kubeoperator.io/kubeoperator-v2.1/userguide-openstack"
               target="_blank">在OpenStack上创建集群</a>
          </p>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="clr-row" *ngIf="!loading" [ngClass]="{'div-disabled' : clusters.length === 0}">
  <div class="clr-col-lg-4 clr-col-12">
    <div class="card">
      <div class="card-block card-style">
        <h3 class="card-title">集群状态</h3>
        <table class="table">
          <tr>
            <th>名称</th>
            <th>状态</th>
          </tr>
          <tbody>
          <tr *ngFor="let cluster of clusters">
            <td>{{cluster.name}}</td>
            <td [ngStyle]="{'color':cluster.status | statusColor }">{{cluster.status | status}}</td>
          </tr>
          </tbody>
        </table>
      </div>
      <div class="card-footer">
        <a class="btn btn-sm btn-link" (click)="toPage('cluster')">集群列表</a>
      </div>
    </div>
  </div>
  <div class="clr-col-lg-4 clr-col-12">
    <div class="card">
      <div class="card-block card-style">
        <h3 class="card-title">容量信息</h3>
        <div class="clr-row">
          <div class="clr-col-sm-11 clr-offset-sm-1">
            <h5>CPU使用率 ({{cpu_usage | number: '1.0-2'}}%)</h5>
          </div>
          <br>
          <br>
          <br>
          <div class="clr-col-sm-11 clr-offset-sm-1">
            <div class="progress success labeled" style="height: 20px !important;position: relative !important;"
                 data-displayval="80%">
              <progress max="100" value="{{cpu_usage}}"
                        style="height: 20px !important;position: relative !important;"></progress>
              <span>{{cpu_total}}核</span>
            </div>
          </div>
          <div class="clr-col-sm-11 clr-offset-sm-1">
            <h5>内存使用率 ({{mem_usage | number: '1.0-2'}}%)</h5>
          </div>
          <br>
          <br>
          <br>
          <div class="clr-col-sm-11 clr-offset-sm-1">
            <div class="progress success labeled" style="height: 20px !important;position: relative !important;"
                 data-displayval="80%">
              <progress max="100" value="{{mem_usage}}"
                        style="height: 20px !important;position: relative !important;"></progress>
              <span>{{mem_total | number: '1.0-2' }}G</span>
            </div>
          </div>
        </div>

      </div>
      <div class="card-footer">
        <a href="..." class="btn btn-sm btn-link">Action 2</a>
      </div>
    </div>
  </div>
  <div class="clr-col-lg-4 clr-col-12">
    <div class="card">
      <div class="card-block card-style">
        <h3 class="card-title">统计信息</h3>
        <div class="clr-row">
          <div class="clr-col-lg-6 clr-col-12 count">
            <span><b>{{nodeCount}}</b></span> <br>
            <span><b>{{clusters.length}}</b></span> <br>
            <span><b>{{namespaceCount}}</b></span> <br>
            <span><b>{{deploymentCount}}</b></span> <br>
            <span><b>{{podCount}}</b></span> <br>
            <span><b>{{containerCount}}</b></span> <br>
          </div>
          <div class="clr-col-lg-6 clr-col-12 type-face">
            <span>Nodes</span> <br>
            <span>Clusters</span> <br>
            <span>Namespaces</span> <br>
            <span>Deployments</span> <br>
            <span>Pods</span> <br>
            <span>Containers</span> <br>
          </div>
        </div>
      </div>
      <div class="card-footer">
        <a href="..." class="btn btn-sm btn-link">集群列表</a>
      </div>
    </div>
  </div>
</div>
<div class="clr-row" *ngIf="!loading" [ngClass]="{'div-disabled' : clusters.length === 0}">
  <div class="clr-col-lg-4 clr-col-12">
    <div class="card">
      <div class="card-block card-style">
        <h3 class="card-title">异常日志</h3>
        <p class="card-text">
          ...
        </p>
      </div>
      <div class="card-footer">
        <a href="..." class="btn btn-sm btn-link">详情</a>
      </div>
    </div>
  </div>
  <div class="clr-col-lg-4 clr-col-12">
    <div class="card">
      <div class="card-block card-style">
        <h3 class="card-title">重启次数</h3>
        <table class="table">
          <tr>
            <th>名称</th>
            <th>集群</th>
            <th>重启次数</th>
          </tr>
          <tr>
            <td>test</td>
            <td>cluster4</td>
            <td>10</td>
          </tr>
          <tr *ngFor="let rp of restartPods">
            <td>{{rp.name}}</td>
            <td>{{rp.cluster_name}}</td>
            <td>{{rp.restart_count}}</td>
          </tr>
        </table>
      </div>
      <div class="card-footer">
        <a href="..." class="btn btn-sm btn-link">更多</a>
      </div>
    </div>
  </div>
  <div class="clr-col-lg-4 clr-col-12">
    <div class="card">
      <div class="card-block card-style">
        <h3 class="card-title">异常容器</h3>
        <table class="table">
          <tr>
            <th>名称</th>
            <th>Pod</th>
            <th>重启次数</th>
          </tr>
          <tr>
            <td>coredns</td>
            <td>coredns-65464bb4d7-tfbs7</td>
            <td>10</td>
          </tr>
          <tr *ngFor="let c of warnContainers">
            <td>{{c.name}}</td>
            <td>{{c.cluster_name}}</td>
            <td>{{c.restart_count}}</td>
          </tr>
        </table>
      </div>
      <div class="card-footer">
        <a href="..." class="btn btn-sm btn-link">更多</a>
      </div>
    </div>
  </div>
</div>
